<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			#text {
				width: 300px;
				height: 40px;
			}
			ul li {
				list-style: none;
				border: 1px solid #F5F5F5;
				width: 300px;
				height: 35px;
				line-height: 35px;
			}
			ul li:hover {
				background-color: #F5F5F5;
			}
			p {
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<input type="text" id="text" placeholder="请输入你的高校关键词" />
		<ul id="ul"></ul>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			$("input").on("input", function() {
				var val = $(this).val();
				if(val == ""){
					$("#ul").text("");
				};
				var htmls = "";
				if (/[a-z]/.test(val)) {
					console.log("请输入正确的大学");
					return false;
				} else {
					$.get("https://test.shop.deepe.ren/search.php", "word=" + val, function(data) {
						var data = JSON.parse(data); //将json数据转换为js
						// console.log(data);
						if (data.code == 1) {
							console.log("查询成功");
							var gaoxiao_data = data.data;
							// console.log(gaoxiao_data);
							var a;
							$.each(gaoxiao_data, function(i, item) {
								htmls += "<li class='gaoxiao" + i + "'>" + item + "</li>";
								$("#ul").html(htmls);
							});
							$.each(gaoxiao_data, function(i, item) {
								$(".gaoxiao" + i).click(function() {
									$("input").val(item);
									$("#ul").text("");
								});
							})
						} else {
							console.log("查询失败了，请重新输入");
						};
					});
				};
			});
		</script>
	</body>
</html>
